<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="parent">
        <div id="son">
            <img id="img" src="baidu.png"/>
        </div>
    </div>
    <script>
        const parentDiv = document.querySelector('#parent');
        const sonDiv = document.querySelector('#son');
        const img = document.querySelector('img');
        function handleClickCapture(event){
            console.log('capture',`type=${event.type}`,`currentTarget=${event.currentTarget.id}`,`target=${event.target.id}`);
        }
        function handleClickBubble(event){
            //event.stopPropagation();
            //event.stopImmediatePropagation();
            console.log('bubble',`type=${event.type}`,`currentTarget=${event.currentTarget.id}`,`target=${event.target.id}`);
        }
        function handleClickBubble2(event){
            console.log('bubble2',`type=${event.type}`,`currentTarget=${event.currentTarget.id}`,`target=${event.target.id}`);
        }
        //给parentDIV添加捕获阶段的点击事件处理函数
        parentDiv.addEventListener('click',handleClickCapture,true);
        //给sonDiv添加捕获阶段的点击事件处理函数
        sonDiv.addEventListener('click',handleClickCapture,true);
        img.addEventListener('click',handleClickCapture,true);
         //给parentDIV添加冒泡阶段的点击事件处理函数
        parentDiv.addEventListener('click',handleClickBubble,false);
        //给sonDiv添加冒泡阶段的点击事件处理函数
        sonDiv.addEventListener('click',handleClickBubble,false);
        //给sonDiv又添加冒泡阶段的点击事件处理函数
        sonDiv.addEventListener('click',handleClickBubble2,false);
        img.addEventListener('click',handleClickBubble,false);
        //stopPropagation
    </script>
</body>
</html>